
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />
    <title>iScroll下拉刷新上滑加载</title>
    <style>
        CSS:
        body,
        ul,
        li {
            padding: 0;
            margin: 0;
            border: 0
        }

        body {
            font-size: 12px;
            font-family: microsoft yahei
        }

        .header {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 45px;
            line-height: 45px;
            font-size: 16px;
            text-align: center;
            background: #e6e6e6
        }

        .footer {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 48px;
            line-height: 48px;
            font-size: 16px;
            text-align: center;
            background: #e6e6e6
        }

        #wrapper {
            position: absolute;
            top: 45px;
            bottom: 0px;
            left: 0;
            width: 100%
        }

        #scroller li {
            padding: 0 10px;
            height: 60px;
            overflow: hidden;
            line-height: 60px;
            background: #ecf6ff;
            margin-top: 10px
        }

        #pullDown,
        #pullUp {
            padding: 0 10px;
            height: 30px;
            line-height: 30px;
            color: #888;
            text-align: center
        }
    </style>
</head>
<body>

<div class="header">header</div>
<div id="wrapper">
    <div id="scroller">
        <div id="pullDown">
            <span class="pullDownLabel">下拉刷新</span>
        </div>
        <ul id="thelist">
            <!--<li>原始数据</li>-->
        </ul>
        <div id="pullUp">
            <span class="pullUpLabel">上拉加载更多</span>
        </div>
    </div>
</div>
<!--<div class="footer">footer</div>-->
<script src="../js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="../js/iscroll.js"></script>

</body>
</html>
<script>
var myScroll,pullDownEl, pullDownOffset,pullUpEl, pullUpOffset,generatedCount = 0;

    function loaded() {
        //动画部分
        pullDownEl = document.getElementById('pullDown');
        pullDownOffset = pullDownEl.offsetHeight;
        pullUpEl = document.getElementById('pullUp');
        pullUpOffset = pullUpEl.offsetHeight;
        myScroll = new iScroll('wrapper', {
            useTransition: true,
            topOffset: pullDownOffset,
            onRefresh: function () {
                if (pullDownEl.className.match('loading')) {
                    pullDownEl.className = '';
                    pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新';
                } else if (pullUpEl.className.match('loading')) {
                    pullUpEl.className = '';
                    pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多';
                }
            },
            onScrollMove: function () {

                if (this.y > 5 && !pullDownEl.className.match('flip')) {
                    pullDownEl.className = 'flip';
                    pullDownEl.querySelector('.pullDownLabel').innerHTML = '释放刷新';
                    this.minScrollY = 0;
                } else if (this.y < 5 && pullDownEl.className.match('flip')) {
                    pullDownEl.className = '';
                    pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';
                    this.minScrollY = -pullDownOffset;
                } else if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) {
                    pullUpEl.className = 'flip';
                    pullUpEl.querySelector('.pullUpLabel').innerHTML = '释放刷新';
                    this.maxScrollY = this.maxScrollY;
                } else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match('flip')) {
                    pullUpEl.className = '';
                    pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Pull up to load more...';
                    this.maxScrollY = pullUpOffset;
                }
            },
            onScrollEnd: function () {
                if (pullDownEl.className.match('flip')) {
                    pullDownEl.className = 'loading';
                    pullDownEl.querySelector('.pullDownLabel').innerHTML = '加载中';
                    pullDownAction();   // Execute custom function (ajax call?)
                } else if (pullUpEl.className.match('flip')) {
                    pullUpEl.className = 'loading';
                    pullUpEl.querySelector('.pullUpLabel').innerHTML = '加载中';
                    pullUpAction(); // Execute custom function (ajax call?)
                }
            }
        });

        loadAction();
    }
    document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);//阻止冒泡
    document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 0); }, false);

    //初始状态，加载数据
    function loadAction(){
        $.ajax({
            type:"get",
            url:"../data/index.json",
            async:true,
            success:function  (result) {
                var oData=result.books;
                var le=oData.length
                for (var i=0;i<le;i++) {
                    var li="<li>"+oData[i].name+"</li>";
                    $("#thelist").append(li);
                }
                //加载完数据之后一定要记得刷新
                myScroll.refresh();
            }
        });
    }

    //下拉刷新当前数据
    function pullDownAction () {
        setTimeout(function () {
            //这里执行刷新操作

            myScroll.refresh();
        }, 400);
    }

    //上拉加载更多数据
    function pullUpAction () {
        setTimeout(function () {
            $.ajax({
                type:"get",
                url:"../data/index.json",
                async:true,
                success:function  (result) {
                    var oData=result.books;
                    var le=oData.length;
                    for (var i=0;i<le;i++) {
                        var li="<li>"+oData[i].name+"</li>";
                        $("#thelist").append(li);
                    }
                    //加载完数据之后一定要记得刷新
                    myScroll.refresh();
                }
            });
        }, 400);
    }
</script>
